<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是路人甲</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/base.min.css"/>
    <style>
        .container{
            width: 100%;
            height:230px;
            overflow: hidden;}
        .img-preview{
            width:150px;
            height:77px;
            overflow: hidden;
            text-align: center;
            position: absolute;
            z-index: 1;
            left: 50%;
            margin-left: -33px;
            top: 50%;
            margin-top: -30px;
            }
        @font-face {
            font-family: 'iconfont';
            src: url('//at.alicdn.com/t/font_1435133037_150932.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/font_1435133037_150932.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/font_1435133037_150932.woff') format('woff'), /* chrome、firefox */
          url('//at.alicdn.com/t/font_1435133037_150932.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .m-ico{
            font-family: 'iconfont';
            display: inline-block;list-style: none;
            font-style: normal;}
        .imgBox-cl{
            font-size: 0;}
        .imgBox-cl button{
            border: none;
            background-color: #f1f1f1;
            display: inline-block;
            font-size: 22px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 2px;}
        .imgBox-cl button.on{
            color: #fff;
            margin-right: 15px;
            background-color: #ff9900;}
        #pic-cl{
            position: absolute;
            top: 20px;
            left: 5px;}
        #pic-cl button{
            width: 30px;opacity: 0.8;
            height: 30px;
            line-height: 30px;
            padding: 0;}
        #inputImage{
            overflow: hidden;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            opacity: 0;}
        #layer{display: none;}
        #show img{
            width: 100%;}
        .try{
           text-align: center;
            position: relative;
            margin-top: 20px;
        }
        .tryImg{
            z-index: 999;
            position: relative;
        }
        .f-p10{
            text-align: center;
            margin-top: 20px;
        }
        .f-p10 button{
            background: #fe9900;
            border: 0;
            color: #ffffff;
            padding: 5px 20px;
        }
       #loading{
           width:100%;
           height: 100%;
           position: absolute;
           background: url("712.gif");
           background-position:center ;
           background-repeat:no-repeat ;
       }
        #mask{
            width: 100%;
           background: rgba(0,0,0,0.5);
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999;           /*注意层级关系，确保遮罩层容器的层级为次最高*/
            display: none;
        }
        #mask-layer{
            position: fixed;;
            z-index: 10000;           /*注意层级关系，确保遮罩层的层级为最高*/
            width: 90%;
            left: 5%;
            top: 5%;
        }
        #mask-layer-con{
            background: #ffffff;
            padding: 25px 10px;
            position: relative;
            padding-bottom: 10px;
        }
        #close{
            font-family: '微软雅黑';  /*关闭按钮的样式根据需求作调整*/
            font-size: 18px;
            color: #000000;
            text-decoration: none;
            position: absolute;
            right: 10px;
            top: 2px;
        }
        #show{
            text-align: center;}
        #show .lode{
            width: 64px;
            margin-top: 10px;
        }
        .body{
            visibility: hidden;}
    </style>
</head>
<body>
<div id="loading"></div>
<div class="body">
<!-- Wrap the image or canvas with a block element -->
<div id="imgBox">
    <div class="container"><img src="tx.jpg"></div>
    <div class="imgBox-cl" id="pic-cl">
        <button onclick="imgBox.cropper('zoom',0.1)"><i class="m-ico">&#xe600;</i></button>
        <br/>
        <button onclick="imgBox.cropper('zoom',-0.1)"><i class="m-ico">&#xe602;</i></button><br/>
        <button onclick="imgBox.cropper('rotate', -5)"><i class="m-ico">&#xe604;</i></button><br/>
        <button onclick="imgBox.cropper('rotate', +5)"><i class="m-ico">&#xe605;</i></button><br/>
        <button onclick="imgBox.cropper('reset')"><i class="m-ico">&#xe607;</i></button>
    </div>
    <div class="f-mt15 f-tac"  >
        <button class="u-btn u-btn-c2 u-btn-lg f-pr"><i class="m-ico">&#xe606;</i> 上传照片<input id="inputImage" type="file" capture="camera" /></button>
        <button class="imgBox-save u-btn u-btn-lg u-btn-c3" >合成我的海报</button>
    </div>

    <div class="try">
    <div class="img-preview"></div>
        <img src="try.png" alt="d" class="tryImg"/>
    </div>

        <input type="text" style="width:50px; display: none" id="liangdu" value="30" placeholder="亮度值0-100"/>

</div>
<!--图片合成-->
<canvas id="layer"></canvas>
<div id="mask">
    <div id="mask-layer">
        <div id="mask-layer-con">
            <a href="javascript:;" id="close">X</a>
            <div id="show"><img src="712.gif" class="lode"/></div>
        </div>
    </div>
</div></div>
<link rel="stylesheet" href="cropper/cropper.min.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="cropper/cropper.min.js"></script>
<script src="js/lrz.mobile.min.js"></script>
<script>
    var imgBox= $('.container > img');
    imgBox.on({
        'built.cropper': function (e) {//初始化完成
            $('#loading').hide();
            $('.body').css('visibility','visible');
            imgBox.cropper('reset')
        }
    }).cropper({
        aspectRatio: 1.5 / 2,
        data: {
            width: 150,
            height: 200
        },
        autoCropArea: 0.65,
        strict: false,
        guides: false,
        highlight: false,
        responsive:true,
        dragCrop: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        preview: '.img-preview',
        crop: function(data) {
            // Output the result data for cropping image.
            // hcPic(imgBox.cropper('getCroppedCanvas'));

        }
    });
    //上传图片
    var $inputImage = $('#inputImage');
    $inputImage.change(function () {
        lrz(this.files[0], {done:function (results) {
            file=results.base64;
            imgBox.cropper('reset').cropper('replace',file);
            $inputImage.val('');
        }});
    });

</script>
<script>
    (function($) {
        $.fn.openMask = function(){ //打开遮罩层
            $('#open').click(function() {
                $('#mask').show();
            });
        };
        $.fn.closeMask=function(){ //关闭遮罩层
            $('#close').click(function() {
                $('#mask').hide();
                $('#show').html('<img src="712.gif" class="lode"/>');
            });
        };
        $.fn.maskLocation=function(){  //调整遮罩层位置
            var mHeight=$(document).height();//获取页面高度
            var mWidth=$(document).width();  //获取页面宽度
            var sHeight=$(window).height();  //获取可视区域高度
            var dHeight=$('#mask-layer-con').height(); //获取遮罩层内容高度
            var dWidth=$('#mask-layer-con').width();   //获取遮罩层内容宽度
            $('#mask').height(mHeight);
            // 使遮罩层居中
            $('#mask-layer').css('left',function(){
                var Left=(mWidth-dWidth)/2+'px'
                return Left;
            });
            $('#mask-layer').css('top',function(){
                var Top=(sHeight-dHeight)/2+'px'
                return Top;
            });
        };

    })(jQuery);

    $('#close').closeMask();
    $('.imgBox-save').click(function(){
        $('#mask').show();
        hcPic(imgBox.cropper('getCroppedCanvas'));
    });
    var brightness = function (pixels, delta) {

        var d = pixels.data;

        for (var i = 0; i < d.length; i += 4) {
            d[i] += delta;     // red
            d[i + 1] += delta; // green
            d[i + 2] += delta; // blue
        }

        return pixels;

    };
    new Image().src="bg.png";//加载背景图片
    function hcPic(pic){//合成图片
        var pctx = pic.getContext('2d');
        var imageData = pctx.getImageData(0, 0, pic.width, pic.height);
        brightness(imageData,parseInt($('#liangdu').val()));
        pctx.putImageData(imageData, 0, 0);

        var c=document.getElementById('layer');
        var ctx=c.getContext('2d');
        c.width=640;
        c.height=896;
        ctx.rect(0,0,c.width,c.height);
        ctx.fillStyle='#fff';
        ctx.fill();
        ctx.drawImage(pic,8,425,30,40);
        ctx.drawImage(pic,37,430,34,40);
        ctx.drawImage(pic,80,445,45,50);
        ctx.drawImage(pic,183,405,28,35);
        ctx.drawImage(pic,195,445,40,42);
        ctx.drawImage(pic,412,435,35,40);
        ctx.drawImage(pic,267,428,35,40);
        ctx.drawImage(pic,225,495,50,57);
        ctx.drawImage(pic,280,498,55,68);
        ctx.drawImage(pic,327,468,43,45);
        ctx.drawImage(pic,8,485,50,65);
        ctx.drawImage(pic,380,500,45,45);
        ctx.drawImage(pic,129,420,30,35);
        ctx.drawImage(pic,159,420,30,35);
        ctx.drawImage(pic,135,490,48,55);
        ctx.drawImage(pic,168,557,60,80);
        ctx.drawImage(pic,432,524,54,60);
        ctx.drawImage(pic,475,467,42,45);
        ctx.drawImage(pic,530,473,42,53);
        ctx.drawImage(pic,542,435,26,30);
        ctx.drawImage(pic,575,528,48,52);
        ctx.drawImage(pic,585,440,30,35);
        ctx.drawImage(pic,600,468,48,52);
        ctx.drawImage(pic,507,575,58,70);
        ctx.drawImage(pic,335,580,15*4,20*3.5);
        //加上背景蒙板
        var bg=new Image;//背景图片
        bg.src='bg.png';
        bg.onload=function() {
            ctx.drawImage(bg, 0, 0, 640, 896);
            var imgData=c.toDataURL('image/jpeg',0.5);
            console.log(imgData);
            $('#show').html('<img src="'+imgData+'" /><div class="f-mt10"><button onclick="save(this)" class="save u-btn u-btn-c3">保存分享</button></div>');
        };

    };
    var lock=false;
    function save(e){
        if(!lock) {
            lock=true;
//            alert($('#show img').attr('src'));
            $(e).addClass('u-btn-c4').html('正在保存...');
            $.ajax(
                    {
                        type: "post",
                        url: "http://www.erkezaixian.com/core/extend/wechat/upload3.php",
                        data: {
                            base64: $('#show img').attr('src'),
                            name: '海报'
                        },
                        async: true,
                        success: function fun(rt) {
                        var url='http://cdnfile.erkezaixian.com/'+rt;
                            location.href='show.php?pic=' +url;
                        }
                    });
        }

    }
</script>

</body>
</html>